<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script type="text/javascript" src="../../../static/js/admin.js"></script>-->
    <link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../static/css/app.css">
    <link rel="stylesheet" href="../../static/css/survey.css">
    <link rel="stylesheet" href="../../static/css/index.css">
    <style>
        .layui-input-block{
            margin-left: 150px;
        }
    </style>
</head>
<body>
<div>
</div>
<br>
<form enctype="multipart/form-data" method="post" class="layui-form"  style="width: 80%;margin: auto;">




    <div class="layui-form-item">
        <label class="layui-form-label" style=" width: 150px">省</label>
        <div class="layui-input-block">
            <input type="text" id="province"  name="totalClassHour" required lay-verify="required"
                   placeholder="省" autocomplete="off" class="layui-input" >
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style=" width: 150px">市</label>
        <div class="layui-input-block">
            <input type="text" id="CITY"  name="totalClassHour" required lay-verify="required"
                   placeholder="市" autocomplete="off" class="layui-input" >
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style=" width: 150px">区</label>
        <div class="layui-input-block">
            <input type="text" id="AREA"  name="totalClassHour" required lay-verify="required"
                   placeholder="区" autocomplete="off" class="layui-input" >
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style=" width: 150px">年份</label>
        <div class="layui-input-block">
            <input type="number" id="YEAR"  name="totalClassHour" required lay-verify="required"
                   placeholder="年份" autocomplete="off" class="layui-input" >
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style=" width: 150px">GDP</label>
        <div class="layui-input-block">
            <input type="number" id="GDP"  name="totalClassHour" required lay-verify="required"
                   placeholder="GDP" autocomplete="off" class="layui-input" >
        </div>
    </div>





    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" type="button" lay-filter="formDemo" onclick="saveData()">保存</button>
            <input class="layui-btn" type="button" name="Submit" onclick="shutDown();" value="返回">
        </div>
    </div>
</form>
</body>
<script type="text/javascript" src="../../static/js/jquery.min.js"></script>

<script src="../../lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="../../static/js/admin.js"></script>
<script src="../../static/js/republic.js" charset="utf-8"></script>
<script>
    // 定义提交参数
    var newImage;
    var recommendId
    var imageRPUrl = 'https://cjrm-prod.oss-cn-shenzhen.aliyuncs.com/'
    var jsessionid= localStorage.getItem("jsessionid")


    // 使用时间组件
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#startData', //指定元素
            theme: '#BDBDBD',
        });
    });
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#endData', //指定元素
            theme: '#BDBDBD',
        });
    });

    function selectFile(file,id,imgId) {
        var formData = new FormData()
        formData.append('imageFile',file.files[0]);
        if(imgId!=undefined){
            let inputUrl =   $('#remarkUrl'+imgId).children('input[name="imgurl"]')[0].value
            formData.append('url',inputUrl);
        }

        if (file.files && file.files[0]) {
            $.ajax({
                type: 'POST',
                url: serverUrl+'/KnowledgeCourseAction/uploadImage;jsessionid='+jsessionid,
                data: formData,
                mimeType: "multipart/form-data",
                contentType: false,
                cache: false,
                xhrFields: {
                    withCredentials : true
                },
                processData: false
            }).success((res)=>{
                console.log()
            var coureImg = document.getElementById('courseImg')
            coureImg.src = 'http://r.chaojirenmai.vip/' +'/'+JSON.parse(res).data
            newImage =JSON.parse(res).data
            $('#fileId'+id).remove()
        })

        }
    }



    function addImage(url, id) {
        if ($("#" + id).attr('src')) {
            return false;
        } else {
            $("#" + id).attr("src", url);
            $("#" + id).removeAttr("style");
            return true;
        }
        // }

    }


    //         数组   大纲图片

    // remarkFiles
    //保存数据
    var saveData = function () {
        // 是否推荐

        var data ={
            province:$('#province').val(),
            city:$('#CITY').val(),
            area:$('#AREA').val(),
            year:$('#YEAR').val(),
            gdp:$('#GDP').val(),
        }

        if(recommendId){
            data.id=recommendId
        }


        $.ajax({
            type: 'POST',
            url: serverUrl + '/poi/saveGdp;jsessionid='+jsessionid,
            data: JSON.stringify(data),
            dataType: "json",
            contentType: "application/json",
            cache: false,
            processData: false,
            xhrFields: {
                withCredentials: true
            },
        }).success((res)=>{
            if(typeof res=="string"){
            var data = JSON.parse(res)
        }else {
            var data = res
        }
        if(data.code==0){
            layer.open({
                // title: r.msg
                content: "保存成功"
                , btn: [' 确定', '取消'],
                btn1: function () {
                    window.location.href = "./GDPList.html"
                },
                btn2: function () {
                }
            });
        }else {
            layer.open({
                // title: r.msg
                content: "保存失败"
                , btn: [' 确定', '取消'],

            });
        }


    })




    }




    //返回保存图片
    var shutDown = function () {
        window.location.href = "./GDPList.html"
    }





    var courseId;
    // 初始化请求
    $(function () {
        var queryString = getQueryVariable('id');
        console.log("执行方法了 ");
        if (!queryString) {
            //新建
        } else {
            //编辑
            // alert(queryString);
            courseId = queryString;
            $.ajax({
                type: "GET",
                url: serverUrl + '/poi/getGdpById/' + queryString +';jsessionid='+jsessionid,
                xhrFields: {
                    withCredentials: true
                },
                success: function (r) {
                    if (r.code == 0) {
                        var province = document.getElementById('province')
                        var CITY = document.getElementById('CITY')
                        var AREA = document.getElementById('AREA')
                        var YEAR = document.getElementById('YEAR')
                        var GDP = document.getElementById('GDP')

                        province.value = r.data.province
                        CITY.value = r.data.city
                        AREA.value = r.data.area
                        YEAR.value = r.data.year
                        GDP.value = r.data.gdp





                    } else {
                        layer.msg(r.msg);
                    }
                },
            });
        }
        // alert(queryString);
        // 根据课程id   获取课程详情  url = /api/KnowledgeCourse/getCourList/{knowledgeCourseId}

    });

    //根据数据来生成图片
    let imgId = 0
    var imgRPurl= 'http://r.chaojirenmai.vip/'
    var setImg = function (url) {
        var imgBox = $('<div onclick="addInputFile('+imgId+')" id="' + 'remarkUrl' + imgId + '" style="width: 85px;height: 85px;display: inline-block;margin-right: 5px;position: relative"><img style="display:block;width: 100%;height: 100%" src="'+imgRPurl + url + '" alt=""> <span style="position: absolute;top: 0;right: 0;"><img src="../../../static/images/shut.png" alt="" onclick="removeImg(' + 'remarkUrl' + imgId + ')" style="width: 20px;cursor: pointer;"></span><input name="imgurl" type="text" style="display: none" value="'+url+'"></div>')
        imgId++
        $('#remarkUrlT').append(imgBox)
        var remarkUrlChilren = $('#remarkUrlT').children('div')
        if (remarkUrlChilren.length > 8) {
            $('#remarkUrl').css('display', 'none')
        }

    }
    var removeImg = function (id) {
        event.stopPropagation()
        id.remove()
        var remarkUrlChilren = $('#remarkUrlT').children('div')
        if (remarkUrlChilren.length < 9) {
            $('#remarkUrl').css('display', 'inline-block')
        }
        // $('#'+id).remove()
    }
    //用弹层 打开音频页面
    var openData = function () {
        window.WeAdminShow('课程列表','../slideshow/children/courseList.html')
    }
    var sureCourse = function (data) {
        var courseNum = document.getElementById('courseNum')
        var courseImg = document.getElementById('courseImg')
        courseImg.src ='https://cjrm-prod.oss-cn-shenzhen.aliyuncs.com/'+ data.imageUrl
        courseNum.value =data.name
        courseNum.setAttribute('data-id',data.id)

        // alert(data)
    }
    //动态生成 input flie 上传
    var fileId =0
    var addInputFile = function (imgId) {
        var inputFile= $('<input type="file"  accept="image/*" id="'+'fileId'+fileId+'" onchange="selectFile(this,'+fileId+','+imgId+')" style="display: none"> ')
        $('#remarkUrlT').append(inputFile)
        inputFile.click()
        fileId++
    }

</script>
</html>